<template>
  <div class="exchange_detail">
    <div slot="title" class="title_close">
      <!-- 货币兑换 -->
      <div class="title">{{$t('account_dialog.exchange_detail_record.56hu04hofvk0')}}</div>
      <img
        src="@/assets/img/icon_gb1.png"
        class="close"
        @click="hide(false)"
      />
    </div>
    <div class="item_detail">
      <div class="item_name">{{$t('account_dialog.exchange_detail_record.56hu04hoiis0')}}</div>
      <div class="item">
        <span>{{exchangeDate.from | exchangeType(te)}} -></span>
        <span>{{exchangeDate.to | exchangeType(te)}}</span>
      </div>
    </div>
    <div class="item_detail">
      <div class="item_name">{{$t('account_dialog.exchange_detail_record.56hu04hoj2o0')}}</div>
      <div class="item">
        <span>{{exchangeDate.amount | formatNumberRgx}}</span>
        <span>{{exchangeDate.from}}</span>
      </div>
    </div>
    <div class="item_detail">
      <div class="item_name">{{$t('account_dialog.exchange_detail_record.56hu04hojns0')}}</div>
      <div class="item">
        <span>{{Number(estimate - handelFee).toFixed(2) | formatNumberRgx}}</span>
        <span>{{exchangeDate.to}}</span>
      </div>
    </div>
    <div class="item_detail">
      <div class="item_name">{{$t('account_dialog.exchange_detail_record.56hu04hok840')}}</div>
      <div class="item">
        <span>{{(handelFee).toFixed(2)}}</span>
        <span>{{exchangeDate.to}}</span>
      </div>
    </div>
    <div class="title2">
      {{$t('account_dialog.exchange_detail_record.56hu04hokno0')}}
    </div>
    <div class="item_detail">
      <div class="item_name">{{exchangeDate.from | exchangeType(te)}}{{$t('account_dialog.exchange_detail_record.56hu04holac0')}}</div>
      <div class="item">
        <span>{{Number(balanceFrom).toFixed(2) | formatNumberRgx}}</span>
        <span>{{exchangeDate.from}}</span>
      </div>
    </div>
    <div class="item_detail">
      <div class="item_name">{{exchangeDate.to | exchangeType(te)}}{{$t('account_dialog.exchange_detail_record.56hu04holac0')}}</div>
      <div class="item">
        <span>{{Number(balanceTo).toFixed(2) | formatNumberRgx}}</span>
        <span>{{exchangeDate.to}}</span>
      </div>
    </div>
    <div class="btn">
      <button class="bt-blue" @click="postExchange">{{$t('account_dialog.exchange_detail_record.56hu04holyc0')}}</button>
    </div>
  </div>
</template>

<script>
import {post_exchange} from '@/assets/js/API/order.js';
export default {
  props: {
    exchangeDate: Object,
    account: Object,
    estimate: Number
  },
  data() {
    return {
      handelFee: 0, // 手续费
      handelFee_: 0, // 最大手续费
      _handelFee: 0, // 最小手续费
      balanceFrom: 0, // 兑换后来源资金
      balanceTo: 0, // 兑换方向后资金
    }
  },
  mounted() {
    // 手续费
    this.hande();
    if(this.exchangeDate.from == "USD") {
      this.balanceFrom = this.account.assetAccount.US.balance - Number(this.exchangeDate.amount);
    } else if(this.exchangeDate.from == "HKD") {
      this.balanceFrom = this.account.assetAccount.HK.balance - Number(this.exchangeDate.amount);
    } else {
      this.balanceFrom = this.account.assetAccount.CN.balance - Number(this.exchangeDate.amount);
    }
    if(this.exchangeDate.to == "USD") {
      this.balanceTo = Number(this.account.assetAccount.US.balance) + Number(this.estimate) - this.handelFee;
    } else if(this.exchangeDate.to == "HKD") {
      this.balanceTo = Number(this.account.assetAccount.HK.balance) + Number(this.estimate) - this.handelFee;
    } else {
      this.balanceTo = Number(this.account.assetAccount.CN.balance) + Number(this.estimate) - this.handelFee;
    }
  },
  methods: {
    // 隐藏对话框
    hide(closeAll) {
      this.$emit("closeDetail",closeAll)
    },
    async postExchange() {
      if(this.exchangeDate.amount == null) return this.$message.error(this.$t('account_dialog.exchange_detail_record.56hu04homco0'));
      const res = await post_exchange(this.exchangeDate);
      if (res.code != 1) return this.$message.error(res.msg);
      this.hide(true)
      // 跳转当前股票所属的当前委托
      if (this.listenTrade) {
        this.$store.dispatch("SetListenTrade", {
          flag: !this.listenTrade.flag,
          type: this.accountType,
        });
      }
      return this.$message.success(this.$t('account_dialog.exchange_detail_record.56hu04hompc0'))
    },
    // 最大最小手续费
    hande() {
      this.handelFee = Number(this.account.fee[0].us) * Number(this.estimate);
      if (this.account.fee[1].max == "" || this.account.fee[1].max == null || this.account.fee[1].max == undefined) {
        // 无最大值
        if (this.account.fee[2].min == "" || this.account.fee[2].min == null || this.account.fee[2].min == undefined)
          // 无最小
          return this.handelFee = Number(this.handelFee);
        else return this.handelFee = Number(this.handelFee <= Number(this.account.fee[2].min) ? Number(this.account.fee[2].min) : this.handelFee); // 无最大有最小
      } else {
        // 有最大值,无最小
        if (this.account.fee[2].min == "" || this.account.fee[2].min == null || this.account.fee[2].min == undefined)
          return this.handelFee = Number(this.handelFee >= Number(this.account.fee[1].max) ? Number(this.account.fee[1].max) : this.handelFee);
      }
      return this.handelFee = Number(
        this.handelFee <= Number(this.account.fee[2].min) ? this.account.fee[2].min : this.handelFee >= Number(this.account.fee[1].max) ? this.account.fee[1].max : this.handelFee
      );
    }
  },
  computed: {
    listenTrade() {
      return this.$store.state.index.listenTrade;
    },
    accountType() {
      return this.$store.state.index.accountType;
    }
  }
}
</script>

<style lang="less">
@import "~@/assets/less/common.less";
.exchange_detail {
  .title {
    text-align: center;
    color: @fff;
    font-size: 14px;
  }
  .item_detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: @fbSix;
    font-size: 12px;
    padding-top: 10px;
  }
  .title2 {
    font-size: 14px;
    color: @fff;
    padding-top: 10px;
  }
  .btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>